<template>
	<view class="page">
		<view class="container">
			<view class="nav">
				<view class="nav-back" @click="BackHome">
					<u-icon name="arrow-leftward" size="45rpx"></u-icon>
					<text class="nav-back-title">排行榜</text>
				</view>
				<view class="tabs">
					<u-tabs :list="list1" @click="TabActive" lineWidth="50rpx" itemStyle="width:12%;"></u-tabs>
				</view>
			</view>
		</view>

		<!-- 推荐榜单 -->
		<view class="recommend">
			<text class="recommend-title">榜单推荐</text>
			<view class="box">
				<view class="box-item" v-for="(item,index) in original" :key="item.id" @click="gosongsheet(item.id)">
					<image :src="item.coverImgUrl" mode=""></image>
					<view class="update">
						<u-line></u-line>
						<text>{{item.updateFrequency}}</text>
					</view>
				</view>
			</view>
		</view>



		<!-- 官方榜单 -->
		<view class="official">
			<view class="official-title">
				<image src="@/static/icon/index-select.png" mode=""></image>
				<text>官方榜</text>
			</view>
			<view class="top" v-for="(item,index) in off" :key="index" @click="gosongsheet(item.id)">
				<view class="msg">
					<text class="msg-title">{{item.name}}</text>
					<text class="msg-up">{{item.updateFrequency}}</text>
				</view>
				<view class="info">
					<image :src="item.coverImgUrl" mode=""></image>
					<view class="warp">
						<view class="warp-item" v-for="(child,indez) in item.tracks" :key="indez">
							<text class="_index">{{indez + 1}}</text>
							<text class="_name">{{child.first}}-{{child.second}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 全部榜单 -->
		<view class="all">
			<text class="all-title">全部榜单</text>
			<view class="big-box">
				<view class="message" v-for="(item,index) in total" :key="index" @click="gosongsheet(item.id)">
					<image :src="item.coverImgUrl" mode=""></image>
					<view class="word">
						<u-line></u-line>
						<text>{{item.updateFrequency}}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		_getTopList,
		_getTopDetail
	} from '@/http/top.js'
	export default {
		data() {
			return {
				list1: [{
					name: '官方',
				}, {
					name: '精选',
				}, {
					name: '曲风'
				}, {
					name: '全球'
				}, {
					name: '语种'
				}, {
					name: 'MV'
				}, {
					name: '特色'
				}],
				original: [],
				off: [], //官方榜
				total: []
			};
		},
		methods: {
			TabActive(item) {
				console.log(item);

			},
			gosongsheet(id){
				uni.navigateTo({
					url:'/view/SongSheet/SongSheet?id=' +id
				})
			},
			// 回到首页
			BackHome() {
				uni.navigateBack({
					data: 1
				})
			},
			async getTopDetail() {
				const {
					list = []
				} = await _getTopDetail();
				this.off = list.slice(0, 6)
				console.log(this.off);
			},
			async getTopList() {
				const {
					list: original
				} = await _getTopList()
				this.original = original.slice(4, 7)

				const {
					list: total
				} = await _getTopList()
				this.total = total
			},
		},
		mounted() {
			this.getTopList()
			this.getTopDetail()
		},
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f6f6f6;
	}

	.container {
		height: 200rpx;

	}

	.nav {
		width: 100%;
		position: fixed;
		background-color: #f6f6f6;
		z-index: 999;
	}

	.nav-back {
		padding: 30rpx;
		display: flex;

		&-title {
			margin-left: 30rpx;
			font-size: 35rpx;
			font-weight: bold;
		}
	}


	.recommend {
		margin: 0 30rpx;
		display: flex;
		flex-direction: column;

		&-title {
			font-size: 35rpx;
			font-weight: bold;
		}

		.box {
			display: flex;
			justify-content: space-between;
			margin: 15rpx 0rpx;

			.box-item {
				position: relative;

				.update {
					position: absolute;
					bottom: 30rpx;
					left: 50rpx;
					font-size: 25rpx;
					color: #fff;

				}

				image {
					width: 210rpx;
					height: 210rpx;
					border-radius: 15rpx;
				}
			}

		}
	}


	.official {
		margin: 0 30rpx;

		&-title {
			display: flex;
			align-items: center;
			font-size: 35rpx;
			font-weight: bold;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}
		}

		.top {
			margin: 30rpx 0rpx;
			background-color: #fff;
			border-radius: 30rpx;

			.msg {
				padding: 30rpx;
				display: flex;
				justify-content: space-between;

				// border: 1px solid red;
				&-title {
					font-size: 35rpx;
					font-weight: bold;
				}

				&-up {
					font-size: 20rpx;
					color: #999;
				}
			}

			.info {
				display: flex;
				align-items: center;
				margin: 0 30rpx;
				padding-bottom: 30rpx;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 15rpx;
				}

				.warp {
					flex: 1;
					margin-left: 30rpx;

					&-item {
						// width:100rpx;
						display: flex;
						font-size: 30rpx;
						line-height: 45rpx;


						._index {
							padding: 0 15rpx;
							font-weight: bold;
							color: #999;
						}

						._name {
							width: 400rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}

	.all {
		margin: 30rpx;
		display: flex;
		flex-direction: column;

		&-title {
			font-size: 35rpx;
			font-weight: bold;
		}

		.big-box {
			.message {
				width: 30%;
				display: inline-block;
				align-items: center;
				flex-direction: column;
				flex-wrap: wrap;
				margin: 15rpx 10rpx;
				position: relative;

				image {
					width: 100%;
					height: 190rpx;
					border-radius: 15rpx;
				}

				.word {
					position: absolute;
					bottom: 30rpx;
					left: 50rpx;
					font-size: 25rpx;
					color: #fff;
				}
			}


		}

	}
</style>
